{extend name="common@base" /}

{block name="title"}{$article->title}{/block}


{block name="body_body"}
<style type="text/css">
    .my_font {
        font-weight: 600;
        /*font-size: 28px;*/
        font-family: "黑体";
        color: #8c888b;
        background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
    -moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
    -ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
        color: transparent;
        /*设置字体颜色透明*/
        -webkit-background-clip: text;
        /*背景裁剪为文本形式*/
        animation: ran 10s linear infinite;
        /*动态10s展示*/
    }

    @keyframes ran {
        from {
            backgroud-position: 0 0;
        }
        to {
            background-position: 2000px 0;
        }
    }
</style>


<div class="col">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h5>{$article->title}</h5>
        </div>
        <div class="panel-body">
            {$article->content}
        </div>
        <div class="panel-footer">
            <div class="row">
                <div class="col-md-2">
                    <a href="{$_form.article_comment}{$article->articleId}"  data-toggle="tooltip" data-placement="top" data-whatever="{$article->articleId}" title="评论数" style="color: black;" class="comment">
                        <span class="fi-brush"><span class="badge badge-warning">{$article->countComments}</span></span>
                    </a>
                </div>
                <div class="col-md-offset-8 col-md-2"><a href="{$_form.user_article}{$article->userId}">{$article->user->nickname}</a></div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h5>评论</h5>
        </div>
        <div class="panel-body">
            <ul class="list-group">
                {if condition="isset($article->comments)"}
                {volist name="$article->comments" id="comment"}
                <li class="list-group-item">
                    <div class="media">
                        <div class="media-left media-middle">
                            <img class="media-object" style="width: 64px;" src="{$comment->user->headimg}" alt="用户头像">
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading"><a href="" class="text-muted">{$comment->user->nickname}</a>&nbsp;<small class="my_font">{$comment->user->personalitySignature}</small></h4>
                            <div>{$comment->content}</div>
                        </div>
                    </div>
                </li>
                {/volist}
                {else /}
                <li class="list-group-item text-center">暂无评论</li>
                {/if}
            </ul>

        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            添加评论
        </div>
        <div class="panel-body">
            <form action="{$_form.comment_add}{$article->articleId}" class="form text-right" method="post">
                <textarea name="content" id="content" cols="30" rows="10"></textarea>
                <input type="submit" title="提交" class="btn btn-default">
            </form>
        </div>
    </div>
</div>

<script src="/static/ckeditor/ckeditor.js" type="application/javascript"></script>
<script>
    $(function () {
        CKEDITOR.replace( 'content');

        $(".laud").on('click',function () {
            var that = $(this);
            $.ajax({
                url:this.href,
                success:function (data) {
                    var d = JSON.parse(data);
                    if (d.msg == 0){
                        alert(d.info);
                    }else{
                        that.find('.badge').text(parseInt(d.data.Lauds));
                    }
                },error:function () {
                    alert('服务器异常，请稍后再试。');
                }
            });
            return false;
        });
    });
</script>
{/block}

{block name="body_sidebar"}
<div class="col">
    <div class="panel panel-default">
        <div class="panel-heading">热门文章</div>
        <div class="panel-body">
        {if condition="isset($hotArticles)"}
        {volist name="hotArticles" id="arti"}
            <p><a href="{$_form.article_detail}{$article->articleId}">《{$arti->title}》</a>——{$arti->user->nickname}</p>
        {/volist}
        {/if}
        </div>
    </div>
</div>
{/block}